import React from 'react';
import { RemediationStatus } from '@/types/Remediation';
import { RiskLevel } from '@/types/work';

interface TabOption<T> {
  value: T;
  label: string;
}

interface FilterTabsProps<T> {
  options: TabOption<T>[];
  value: T;
  onChange: (value: T) => void;
  className?: string;
}

// 通用标签页组件
function FilterTabs<T>({ options, value, onChange, className = '' }: FilterTabsProps<T>) {
  return (
    <div className={`flex space-x-1 p-1 bg-muted rounded-md ${className}`}>
      {options.map((option) => (
        <button
          key={String(option.value)}
          onClick={() => onChange(option.value)}
          className={`
            px-3 py-1.5 text-sm font-medium rounded-md transition-colors
            ${value === option.value
              ? 'bg-background text-foreground shadow-sm'
              : 'text-muted-foreground hover:text-foreground'
            }
          `}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}

// 状态筛选标签页
export const StatusFilterTabs: React.FC<{
  value: 'all' | RemediationStatus;
  onChange: (value: 'all' | RemediationStatus) => void;
  className?: string;
}> = ({ value, onChange, className }) => {
  const options: TabOption<'all' | RemediationStatus>[] = [
    { value: 'all', label: '全部' },
    { value: RemediationStatus.IN_PROGRESS, label: '整改中' },
    { value: RemediationStatus.COMPLETED, label: '已完成' },
  ];
  
  return (
    <FilterTabs
      options={options}
      value={value}
      onChange={onChange}
      className={className}
    />
  );
};

// 风险等级筛选标签页
export const RiskLevelFilterTabs: React.FC<{
  value: 'all' | RiskLevel;
  onChange: (value: 'all' | RiskLevel) => void;
  className?: string;
}> = ({ value, onChange, className }) => {
  const options: TabOption<'all' | RiskLevel>[] = [
    { value: 'all', label: '全部' },
    { value: RiskLevel.HIGH, label: '高风险' },
    { value: RiskLevel.MEDIUM, label: '中风险' },
    { value: RiskLevel.LOW, label: '低风险' },
  ];
  
  return (
    <FilterTabs
      options={options}
      value={value}
      onChange={onChange}
      className={className}
    />
  );
};

export default FilterTabs;
